
{% extends "mobile/common/vacation_base.html" %}

{% block title %}订单详情{% endblock %}

{% block css_ex %}
    <!-- build:css(.tmp) css/hotel/hotel_order_main.css -->
    <link rel="stylesheet" href="{{ STATIC_URL }}mobile/css/tripproduct/vacation_order.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}mobile/css/hotel/hotel_book.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}mobile/css/hotel/hotel_order_handling.css">
    <!-- endbuild -->
{% endblock %}

{% block app_header %}
    <script>
        {% if not is_breadtrip %}
        // App 显示底部navigation bar
        var btShowBottomBar = 'YES';
        // System
        var breadtripBannerTitle = '{{ hotel_name|safe }}';
        var activityName = '{{ hotel_name|safe }}';
        // Display share button or not
        var shrFlag = 0;
        // Display back button or not 
        var goBackFlag = true;
        // Display contact button or not 
        var contactFlag = false;
        // Display confirm button or not 
        var confirmFlag = false;
        {% else %} 
        // App 显示底部navigation bar
        var bt_show_bottom_bar = 'YES';

        // System
        var breadtrip_banner_title = '{{ hotel_name|safe }}';
        var activity_name = '{{ hotel_name|safe }}';

        // Display share button or not
        var shr_flag = 0;
        var cnl_webview = 1;
        var disable_back = 1;
        {% endif %}   
    </script>
{% endblock %}
    
{% block content %}
{% if status == 2 %}
<div class="order_status blank">
    <h1><i class="icon-smile"></i><span>预订提交成功!</span></h1>
    <p>订单号：{{ data.order.order_id }}</p>
</div>
{% elif status == 3 %}
<div class="order_status blank">
    <h1><i class="icon-smile"></i><span>预订已完成</span></h1>
    <p>订单号：{{ data.order.order_id }}</p>
</div>
{% else %}
<div class="order_status blank cancel">
    <h1><i class="icon-cancel"></i>订单取消处理中</h1>
    <p>您的订单取消请求正在处理中<br>我们会在72小时内联系您进行退款操作<br>有疑问欢迎与我们联系</p>
    <a href="tel:400-625-1066"><i class="icon-tel"></i>电话</a>
    <a href="/wechat/landing_page/"><i class="icon-wechat"></i>微信</a>
    <div style="clear:both;"></div>
</div>
{% endif %}
<section class="booking-form disable">
    <p class="text-error hide"></p>
    <form id="form" method="post">
        {% csrf_token %}
        {% if not (user and user.id) %}
            <input type="hidden" name="device_id" value="{{device_id}}">
        {% endif %}
        <h3 class="booking-title"><i class="icon-order"></i>基本信息</h3>
        <table cellspacing="0" class="contact-table">
            <tr>
                <td><label>入住时间</label></td>
                <td>   
                    <p class="default">{{ data.order.check_in_date }}</p>
                </td>
            </tr>
            <tr>
                <td><label>退房时间</label></td>
                <td>   
                    <p>{{ data.order.check_out_date }}</p>
                </td>
            </tr>
            <tr>
                <td><label>房间数量</label></td>
                <td>
                    <p>{{ data.order.room_count }}</p>
                </td>
            </tr>
        </table>
        <table cellspacing="0" class="contact-table">
            <tr>
                <td>
                    <label>房型</label>
                </td>
                <td>   
                    <p>{{ data.room.name }}</p>
                </td>
            </tr>
            <tr>
                <td>
                    <label>价格</label>
                </td>
                <td>
                    <p>
                        <span class="type-price">￥<b>{{ data.order.total_price }}</b></span>
                    </p>
                </td>
            </tr>
        </table>
        <!-- <p class="hotel-tip">此房间价格包含税费和服务费 ￥</p> -->
        {% for item in data['order']['items'] %}
        <h3 class="booking-title room">房间{{ loop.index }} 联系人</h3>
        <table cellspacing="0" class="contact-table">
            <tr>
                <td>
                    <label>护照英文姓</label>
                </td>
                <td>
                    <p><span>{{ item.customer_last_name }}</span></p>
                </td>
            </tr>
            <tr>
                <td>
                    <label>护照英文名</label>
                </td>
                <td>   
                    <p><span>{{ item.customer_first_name }}</span></p>
                </td>
            </tr>
            <tr>
                <td><label>床型</label></td>
                <td >
                    <p><span>{{ item.bed_type_name }}</span></p>
                </td>
            </tr>
        </table>
        {% endfor %}
        {% if data.order.customer_preference_text %}
        <table cellspacing="0" class="contact-table">
            <tr>
                <td>
                    <label>住客偏好</label>
                </td>
                <td>
                    <p><span>{{ data.order.customer_preference_text }}</span></p>
                </td>
            </tr>
        </table>
        {% endif %}
        {% if data.order.invoice_title %}
        <table cellspacing="0" class="contact-table">
            <tr>
                <td>
                    <label>发票抬头</label>
                </td>
                <td>   
                    <p><span>{{ data.order.invoice_title }}</span></p>
                </td>
            </tr>
        </table>
        {% endif %}
        <h3 class="booking-title"><i class="icon-user"></i>联系方式</h3>
        <table cellspacing="0" class="contact-table">
            <tr>
                <td><label>邮箱</label></td>
                <td >   
                    <p><span>{{ data.order.email }}</span></p>
                </td>
            </tr>
            <tr>
                <td><label>手机号</label></td>
                <td >   
                    <p ><span>{{ data.order.mobile }}</span></p>
                </td>
            </tr>
        </table>
        <div class="total-block">
            <p>总价：</p>
            <p class="total-price">￥<span>{{ data.order.total_price }}</span></p>
        </div>
        <div class="hotel-rule">查看本产品的
            <a id="check-policy">取消政策</a>
        </div>
        {% if canceltips.is_cancelable %}
        
        <div class="cancel-btn">取消订单<input type="submit" value="取消订单"></div>
        {% endif %}
    </form>
</section>
<!-- 取消政策 -->
<div id="popup-comfirm" class="popup popup-comfirm hide policy">
    <p class="popup-mask"></p>
    <div class="popup-inner popup-comfirm-inner">
        <h4>
        {% if data.order.cancel_policy %}{{data.order.cancel_policy | replace('；', '<br>') | safe }}<br>{% endif %}
        {% if data.order.cancel_rule %}{{data.order.cancel_rule | replace('；', '<br>') | safe}}<br>{% endif %}
        </h4>
        <a class="confirm-btn">确定</a>
    </div>
</div>
<!-- 取消订单确认浮层 -->
<div id="popup-comfirm" class="popup popup-comfirm confirm hide">
    <p class="popup-mask"></p>
    <div class="popup-inner popup-comfirm-inner">
        <h4>确定要取消此订单？</h4>
        <div><a class="no-btn">取消</a><a class="confirm-btn">确定</a></div>
    </div>
</div>
{% endblock %}

{# 不加载swipe组件 #}
{% block js_swipe %}{% endblock %}

{# 不加载zepto touch组件 #}
{% block js_touch %}{% endblock %}

{% block js_ex %}
<script type="text/javascript">
BT.context('url','{% url hotel_order_cancel hotelproductorder_id %}');
</script>
<!-- build:js js/hotel/hotel_order_handling.js -->
<script src="{{ STATIC_URL }}mobile/js/hotel/hotel_order_handling.js"></script>
<!-- endbuild -->
{% endblock %} 
